{% extends "../base.html" %}

{% block title %} {% end %}
{% block css %} {% end %}
{% block body %}
<form class="layui-form" action="{{ request.uri }}" method="post" id="editForm">
    {% raw xsrf_form_html() %}
    <input type="hidden" name="id" value="{{ role.id }}">
    <div class="layui-tab" style="margin: 1em;">
        <ul class="layui-tab-title">
            <li class="layui-this">基本信息</li>
            <li>权限分配</li>
        </ul>
        <div class="layui-tab-content">
            <div class="layui-tab-item layui-show">
                <div class="layui-form-item">
                    <label class="layui-form-label">角色名称</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input field-rolename" name="rolename" value="{{ role.rolename }}" lay-verify="required" autocomplete="off" placeholder="请输入角色名称">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">排序</label>
                    <div class="layui-input-block">
                        <input type="text" class="layui-input field-sort" name="sort" value="{{ role.sort }}" lay-verify="" autocomplete="off" placeholder="请输入排序号">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">状&nbsp;&nbsp;&nbsp;&nbsp;态</label>
                    <div class="layui-input-block">
                        <input type="checkbox" name="status" value="1" lay-skin="switch" lay-text="启用|禁用" {% if role.status==1 %}checked{% end %}>
                    </div>
                </div>
            </div>
            <div class="layui-tab-item layui-form">
                <div class="layui-collapse page-tips">
                  <div class="layui-colla-item">
                    <h2 class="layui-colla-title">温馨提示</h2>
                    <div class="layui-colla-content layui-show">
                        <p>
                        您可以针对此用户单独设置角色分组以外的权限；优先判断“个人权限”，再次判断“角色权限”
                        </p>
                    </div>
                  </div>
                </div>
                <div class="layui-form-item role-list-form">
                    {% for v in menu_list %}
                    <dl class="role-list-form-top">
                        <dt>
                            <input type="checkbox" name="permission" value="{{ v['code'] }}" lay-filter="userPermission" data-parent="0" data-level="1" lay-skin="primary" title="{{ v['title'] }}"/>
                        </dt>
                        <dd>
                            {% for vv in v['children'] %}
                            <dl>
                                <dt>
                                    <input type="checkbox" name="permission" value="{{ vv['code'] }}" lay-filter="userPermission" data-pid="{{ vv['parent_id'] }}" data-level="2" lay-skin="primary" title="{{ vv['title'] }}">
                                </dt>
                                <dd>
                                    {% for vvv in vv['children'] %}
                                    <dl>
                                        <dt style="float: left;">
                                            <input type="checkbox" name="permission" value="{{ vvv['code'] }}" lay-filter="userPermission" data-pid="{{ vvv['parent_id'] }}" data-level="3" lay-skin="primary" title="{{ vvv['title'] }}">
                                        </dt>
                                        <dd>
                                            {% for vvvv in vvv['children'] %}
                                                <input type="checkbox" name="permission" value="{{ vvvv['code'] }}" lay-filter="userPermission" data-pid="{{ vvvv['parent_id'] }}" data-level="4" lay-skin="primary" title="{{ vvvv['title'] }}">
                                            {% end %}
                                        </dd>
                                    </dl>
                                    {% end %}
                                </dd>
                            </dl>
                            {% end %}
                        </dd>
                    </dl>
                {% end %}
                </div>
            </div>
        </div>
    </div>
    <div style="position:fixed; bottom:0; background: #fff; width: 100%; height: 3.2em; text-align: center;">
        <input type="hidden" class="field-id" name="id">
        <button type="submit" class="layui-btn" lay-submit="" lay-filter="formSubmit">提交</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
</form>
 {% end %}

{% block javascript %}
<script type="text/javascript">

var formData = {% raw data_info %}

layui.use(['form'], function() {
    var $ = layui.jquery
    var form = layui.form

    set_form_data(formData)

    form.on('checkbox(userPermission)', function(data) {
        var child = $(data.elem).parent('dt').siblings('dd').find('input')
        /* 自动选中父节点 */
        var check_parent = function (id) {
            var self = $('.role-list-form input[value="'+id+'"]')
            var pid = self.attr('data-pid') || ''
            self.prop('checked', true)
            if (pid == '') {
                return false
            }
            check_parent(pid)
        }
        /* 自动选中子节点 */
        child.each(function(index, item) {
            item.checked = data.elem.checked
        })
        check_parent($(data.elem).attr('data-pid'))
        form.render('checkbox')
    })

    /* 权限赋值 */
    if (formData) {
        for(var i in formData['permission']) {
            $('.role-list-form input[value="'+formData['permission'][i]+'"]').prop('checked', true)
        }
        form.render('checkbox')
    }

    // 表单验证
    form.verify({
        rolename : [/[A-Za-z0-9\u4e00-\u9fa5]{2,40}$/, '角色名称必须2到40位字母、数字组合或汉字'],
        // password : [/(.+){8,40}$/, '8到40个任意字符'],
        number : [/^[0-9]*$/, '必须输入数字啊']
    })
    form.on('submit(formSubmit)', function(obj) {
        layer.msg('数据提交中...',{time:50000})

        var permission = []
        $("input:checkbox[name='permission']:checked").each(function() {
            permission.push($(this).val())
        })
        obj.field.permission = permission

        $.ajax({
            type: "POST",
            url: obj.form.action,
            data: obj.field,
            success: function(res) {
                if (res.code==0) {
                    layer.msg('更新成功', {icon: 1, time: 2000}, function(){
                        parent.edit_success(res.data)
                        var index = parent.layer.getFrameIndex(window.name)
                        parent.layer.close(index)
                    })
                } else if(res.msg) {
                    layer.msg(res.msg)
                    $(":input[name='rolename']").focus()
                } else {
                    layer.msg('{{ _('未知错误') }}')
                }
            },
            error: function(xhr){
                console.log(xhr.responseJSON)
                if (xhr.responseJSON && xhr.responseJSON.msg) {
                    layer.msg(xhr.responseJSON.msg)
                } else {
                    layer.msg('{{ _('未知错误') }}')
                }
            }
        })
        return false
    })
})
</script>
 {% end %}
